{extend name="public/base" /}

<title>{block name="title"}空间信息{/block}</title>
{block name="menu"}
<div>
    <button type="button" class="layui-btn layui-bg-blue" id="add-adminuser">添加空间</button>
</div>
{/block}
{block name="main"}
<!-- 右侧主信息 -->
<div class="con-box" style="padding: 10px;">
    <table class="layui-hide" id="user-data" lay-filter="user-data"></table>
</div>
<script type="text/html" id="TPL-treeTable-demo">
    <div class="layui-btn-container">
      <button class="layui-btn layui-btn-sm" lay-event="getChecked">获取选中数据</button>
      <button class="layui-btn layui-btn-sm" lay-event="openAll">全部展开</button>
      <button class="layui-btn layui-btn-sm" lay-event="closeAll">全部折叠</button>
    </div>
  </script>
<script type="text/html" id="TPL-treeTable-demo-tools">
    <div class="layui-btn-container">
      <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
      <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="addChild">新增</a>
      <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="del">删除</a>
    </div>
  </script>
<div id="add-box" style="display: none;">
    <form class="layui-form" action="" lay-filter="demo-val-filter">
        <input type="hidden" name="userid">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">空间名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="title" placeholder="请输入空间名称" lay-verify="required" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">上级空间</label>
            <div class="layui-input-block">
                <select name="pid" lay-verify="required" class="select-tree">
                    <option value="0">首空间</option>
                    {foreach $spaceList as $key=>$vo }
                        <option value="{$vo.id}">{$vo.title}</option>
                    {/foreach}
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">空间图片</label>
                <div class="layui-input-inline">
                    <input type="text" name="image" class="layui-input"  value="">
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea name="remark" placeholder="请输入空间说明" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit lay-filter="btn-save">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
{/block}
{block name="javascript"}
<script>
    var controllername = 'admin/api_space';
    var title = '{$title}';
    var area = ["450px", "400px"];

    layui.use(function () {
        var treeTable = layui.treeTable;
        var layer = layui.layer;
        var dropdown = layui.dropdown;
        var $ = layui.jquery;
        var form = layui.form;
        // 渲染
        var inst = treeTable.render({
            elem: '#user-data',
            id:'treeTable_id',
            url: '/admin/api_space/list', // 此处为静态模拟数据，实际使用时需换成真实接口
            tree: { // treeTable 特定属性集
                enable: true,
                customName: {
                    pid: 'pid',
                    name: 'title'
                },
                data: {
                    isSimpleData: true,
                    rootPid: 0
                },
                view: {},
                async: {},
                callback: {}
            },
            maxHeight: '501px',
            toolbar: '#TPL-treeTable-demo',
            cols: [[
                { type: 'checkbox', fixed: 'left' },
                { field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left' },
                { field: 'title', title: '名称', width: 450, fixed: 'left' },
                { fixed: "right", title: "操作", width: 190, align: "center", toolbar: "#TPL-treeTable-demo-tools" }
            ]],
            page: false
        });

        treeTable.on("tool(user-data)",function(obj) {
            var layEvent = obj.event;
            if(layEvent === "detail") {
                console.log(obj);
                
            }
            
        });

        // 表头工具栏工具事件
        treeTable.on("toolbar(user-data)", function (obj) {
            var config = obj.config;
            var tableId = config.id;
            var status = treeTable.checkStatus(tableId);
            // 获取选中行
            if (obj.event === "getChecked") {
                if (!status.data.length) return layer.msg('无选中数据');
                console.log(status);
                layer.alert("当前数据选中已经输出到控制台，<br>您可按 F12 从控制台中查看结果。");
            }
            if (obj.event === "openAll") {
                console.log('openAll');
                
                treeTable.expandAll('treeTable_id', true); // 关闭全部节点
            }
            if (obj.event === "closeAll") {
                console.log('closeAll');
                treeTable.expandAll('treeTable_id', false); // 关闭全部节点
            }

        });

        $('#add-adminuser').click(function (e) {
            e.preventDefault();
            layer.open({
                type: 1,
                title: '添加' + title,
                area: area,
                shade: 0,
                content: $('#add-box')
            })
        });

        form.on('submit(btn-save)', function (data) {
            var field = data.field;
            console.log('field=', field);
            var loadIndex = layer.load(1);
            $.ajax({
                type: "post",
                url: '/api_space/add',
                data: field,
                dataType: "json",
                success: function (response) {
                    console.log('success=', response);
                    if (response.code == 1) {
                        layer.closeAll();
                        table.reload('user-data');
                    }
                    else {
                        layer.alert(response.msg)
                        layer.closeAll('loading')
                    }
                },
                error: function (response) {
                    console.log('errpr=', response);
                }
            });

            return false;
        });
        form.verify({
            // 验证密码，且为必填项
            password: function (value, elem) {
                if (!/^[\S]{5,15}$/.test(value)) {
                    return '密码必须为 5 到 15 位的非空字符';
                }
            },
        });

        $('#changepass').click(function (e) {
            e.preventDefault();
            var oldpass = "11111"
            var newpass = "admin"
            changeIndex = layer.open({
                type: 1,//1 dom或文本，2 iframe,3 加载层,4 tips
                shadeClose: true,
                title: '修改密码',
                content: $('#changepass-box'),
                success: function (layero) {

                }
            });

        });

        //<button lay-submit lay-filter="filter">提交</button>
        form.on('submit(changepass-form)', function (data) {
            console.log(data);
            if (data.field.newpass !== data.field.renewpass) {
                layer.alert("两次密码输入不一致！");
                return false
            }
            $.ajax({
                type: "post",
                url: "/api_admin/changePass",
                data: {
                    oldpass: data.field.oldpass,
                    newpass: data.field.newpass
                },
                dataType: "json",
                success: function (response) {
                    console.log(response);
                    if (response.code == 1) {
                        layer.msg(response.msg)
                        layer.close(changeIndex)
                    } else {
                        layer.alert(response.msg)
                    }
                }
            });
            return false;
        });
    });
</script>
{/block}

{block name="common-script"}{/block}